<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}"/>
    <script th:src="@{/js/lib/prototype.js}" type="text/javascript"></script>
    <script th:src="@{/js/lib/scriptaculous.js?load=effects}" type="text/javascript"></script>
    <script th:src="@{/js/lib/lightbox.js}" type="text/javascript"></script>
    <script type="text/javascript" th:src="@{/js/lib/java.js}"></script>
</head>
<body>
<div id="wrap">
    <div th:replace="inc/before/head :: div"></div>
    <div class="center_content">
        <div class="left_content">
            <div class="crumb_nav">
                <a href="index.html">主页</a> &gt;&gt; <span th:text="${book.name}"></span>
            </div>
            <div class="title"><span class="title_icon"><img th:src="@{images/bullet1.gif}" alt="" title=""/></span>
                <span th:text="${book.name}"></span>
            </div>

            <div class="feat_prod_box_details">

                <div class="prod_img">
                    <img th:src="@{'/image/'+${book.image}}" width="108" height="159" alt="" title=""
                         border="0"/>
                    <br/><br/>
                    <a th:href="@{'/image/'+${book.image}}" rel="lightbox">

                    </a>
                </div>

                <div class="prod_det_box">
                    <div class="box_top"></div>
                    <div class="box_center">
                        <div class="prod_title">介绍</div>
                        <p class="details" th:text="${book.synopsis}">
                        </p>
                        <div class="price"><strong>价格:</strong> <span class="red" th:text="${book.price}"></span></div>
                        <div class="price"><strong>COLORS:</strong>
                            <span class="colors"><img src="images/color1.gif" alt="" title="" border="0"/></span>
                            <span class="colors"><img src="images/color2.gif" alt="" title="" border="0"/></span>
                            <span class="colors"><img src="images/color3.gif" alt="" title="" border="0"/></span></div>
                        <a href="details.html" class="more">
                            借阅
                        </a>
                        <div class="clear"></div>
                    </div>

                    <div class="box_bottom"></div>
                </div>
                <div class="clear"></div>
            </div>


            <div id="demo" class="demolayout">

                <ul id="demo-nav" class="demolayout">
                    <li><a class="active" href="#tab1">详细介绍</a></li>
                    <li><a class="" href="#tab2">类似书籍</a></li>
                </ul>

                <div class="tabs-container">

                    <div style="display: block;" class="tab" id="tab1">
                        <p class="more_details">
                            <span th:text="${book.description}"></span>
                        </p>
                    </div>

                    <div style="display: none;" class="tab" id="tab2">
                        <div class="new_prod_box">

                            <div class="new_prod_bg">
                                <a href="details.html"><img src="images/thumb1.gif" alt="" title="" class="thumb"
                                                            border="0"/></a>
                            </div>
                            <a href="details.html">书名</a>
                        </div>


                        <div class="clear"></div>
                    </div>

                </div>


            </div>

            <div class="clear"></div>
        </div><!--end of left content-->
        <div th:replace="inc/before/right :: div"></div>
        <div class="clear"></div>
    </div><!--end of center content-->
    <div th:replace="inc/before/footer :: div"></div>
</div>

</body>
<script type="text/javascript">

    var tabber1 = new Yetii({
        id: 'demo'
    });

</script>
<script type="text/javascript" th:src="@{/js/lib/jquery-1.11.0.min.js}"></script>
<script type="text/javascript">
    $(function () {
        $('#menu a').each(function () {
            var aText = $(this).text();
            if ('图书' == aText) {
                $(this).parent('li').addClass('selected');
            } else {
                $(this).parent('li').removeClass('selected');
            }

        });
    });
</script>
</html>